<template>
  <el-dialog ref="orderDialog" title="修改订单信息" :visible.sync="visible">
    <el-form ref="orderForm" :model="order" :rules="rules">
      <el-form-item label="客户姓名，请谨慎修改！" v-if="key === 'name'" prop="name">
        <el-input v-model="order.name" auto-complete="off"></el-input>
      </el-form-item>

      <el-form-item label="客户联系方式，请谨慎修改！" v-if="key === 'tel'" prop="tel">
        <el-input v-model="order.tel" auto-complete="off"></el-input>
      </el-form-item>

      <el-form-item label="选择材质，请谨慎修改！" v-if="key === 'material'" prop="material">
        <el-select v-model="order.material" placeholder="请选择" style="width: 100%;">
          <el-option v-for="item in materials" :key="item.name" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="收货地址（省市区），请谨慎修改！" v-if="key === 'address'" prop="address">
        <el-cascader :options="china" change-on-select v-model="order.address" @change="changeAddress" :props="props" style="width: 100%;">
        </el-cascader>
      </el-form-item>

      <el-form-item label="收货地址（详细地址），请谨慎修改！" v-if="key === 'address'" prop="street">
        <el-input v-model="order.street" auto-complete="off"></el-input>
      </el-form-item>

      <el-form-item label="预估面积，请谨慎修改！" v-if="key === 'square'" prop="square">
        <el-input v-model="order.square" auto-complete="off"></el-input>
      </el-form-item>

      <el-form-item label="订单备注，请谨慎修改！" v-if="key === 'remark'">
        <el-input type="textarea" :rows="2" v-model="order.remark" auto-complete="off"></el-input>
      </el-form-item>

      <el-form-item label="测量费用，请谨慎修改！" v-if="key === 'measure_amount'">
        <el-input v-model="order.measure_amount" auto-complete="off"></el-input>
      </el-form-item>

      <el-form-item label="运输费用，请谨慎修改！" v-if="key === 'ship_price'">
        <el-input v-model="order.ship_price" auto-complete="off"></el-input>
      </el-form-item>

      <el-form-item label="安装费用，请谨慎修改！" v-if="key === 'install_amount'">
        <el-input v-model="order.install_amount" auto-complete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="default" @click="visible = false">取消</el-button>
      <el-button type="primary" @click="onSubmit('orderForm')">修改</el-button>
    </div>
  </el-dialog>
</template>

<script>
import china from '../../../utils/china'
import { mapGetters, mapActions } from 'vuex'

export default {
  data: () => ({
    demo: [],
    china: china,
    props: {
      value: 'name',
      label: 'name',
      children: 'childs'
    },
    visible: false,
    key: '',
    order: {
      name: '',
      tel: '',
      material: '',
      square: '',
      remark: '',
      address: [],
      street: '',
      measure_amount: 0,
      ship_price: 0,
      install_amount: 0
    },
    materialName: '',
    rules: {
      name: [
        { type: 'string', required: true, message: '请输入客户姓名！', trigger: 'blur' }
      ],
      tel: [
        { type: 'string', required: true, pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/, message: '请输入正确联系电话！', trigger: 'blur' }
      ],
      square: [
        { required: true, pattern: /^\d+(\.\d+)?$/, message: '请输入正确的面积！', trigger: 'blur' }
      ],
      measure_amount: [
        { type: 'number', required: true, message: '请输入测量费用！', trigger: 'blur' }
      ],
      ship_price: [
        { type: 'number', required: true, message: '请输入运输费用！', trigger: 'blur' }
      ],
      install_amount: [
        { type: 'number', required: true, message: '请输入安装费用！', trigger: 'blur' }
      ]
    }
  }),
  created() {
    this.setMaterials()
  },
  computed: {
    ...mapGetters('orders', {
      oldOrder: 'order',
      materials: 'materials'
    })
  },
  methods: {
    ...mapActions('orders', [
      'updateOrder',
      'setMaterials'
    ]),

    // 打开dialog的操作
    openDialog(key, value) {
      if (key === 'material' && isNaN(parseInt(value))) {
        this.order[key] = this.materials.filter((item) => {
          return item.name === value
        })[0].id
      } else if (key === 'address') {
        this.order.address = value.prefix
        this.order.street = value.street
      } else {
        this.order[key] = value
      }

      this.key = key
      this.visible = true

    },

    // 提交时候的操作
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let attributes = {}
          if (this.key === 'material') {
            let material = this.materials.filter((item) => {
              return item.id === this.order.material
            })[0].name
            attributes = { material_id: this.order.material, material: material }

          } else if (this.key === 'address') {
            let address = this.order.address
            attributes = { province: address[0], city: address[1], area: address[2], street: this.order.street }

          } else {
            if (['measure_amount', 'ship_price', 'install_amount'].indexOf(this.key) !== -1) {
              var value = this.order[this.key] * 100
            } else {
              var value = this.order[this.key]
            }
            attributes = { [this.key]: value }
          }

          this.updateOrder({ id: this.oldOrder.id, attributes: attributes }).then((res) => {
            if (res) {
              this.$message({
                type: 'info',
                message: '修改成功！'
              })
              this.visible = false;
            } else {
              this.$message({
                type: 'error',
                message: '修改失败，请重试！'
              })
            }
          })
        } else {
          this.$message({
            type: 'error',
            message: '修改失败，请重试！'
          })
          return false;
        }
      })
    },

    changeAddress(val) {
    }
  },
  watch: {
    'order.material': function(value, oldValue) {
      // console.log(value)
    }
  }
}
</script>
